<template>
  <div id="input_list">
    <div class="head">
      <i class="iconfont icon-member-left" @click="$router.go(-1)"></i>
      <span class="name t-l">{{$i18n.t('base.userRegistration')}}</span>
    </div>
    <div class="content">
      <div class="inputBox">
        <ul>
          <li class="selectBox" v-if="email_register">
            <van-radio-group v-model="radio" direction="horizontal" icon-size="15px">
              <van-radio name="0" :checked-color="subjectColor">手机号</van-radio>
              <van-radio name="1" :checked-color="subjectColor">邮箱</van-radio>
            </van-radio-group>
          </li>
          <li class="country" v-if="inputShowList.countryCodeShow && !inputShowList.logPlugIn && radio == '0'">
            <van-cell required is-link :rules="[{ required: true, message: '请输入国际区号' }]" @click="openPopUp = true">
              <template #title>
                <div style="width: 6rem; margin-left: 0.75rem; font-weight: 500; font-weight: 550;">
                  {{ $i18n.t("base.countryCode") }}
                </div>
              </template>
              <template #default>
                <span>{{ form.country ? "+" + form.country : "请输入国际区号" }}</span>
              </template>
            </van-cell>
          </li>
          <li v-if="!inputShowList.logPlugIn && ((!mobile_check_type && radio == '0') || radio == '1')">
            <van-field
              v-model.trim="form.mobile"
              :type="radio == '1' ? 'text' : 'number'"
              clearable
              :placeholder="radio == '1' ? '请输入您的邮箱' : $i18n.t('base.enterPhoneNumber')"
              :rules="[{ required: true, message: radio == '1' ? '请输入您的邮箱' : $i18n.t('base.enterPhoneNumber') }]"
              :mode="false"
            >
              <template #label>
                <div class="slotCode">
                  <i v-if="radio == '1'" class="iconfont icon-youxiang_1" style="width: 0.82rem; font-size: 0.8rem;margin-top:0.15rem;" />
                  <img v-else src="../assets/images/loginPhone.png" style="width: 0.719rem; height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
            <div class="label" v-if="type == 'register'">{{ radio == "1" ? "注册后，该邮箱将作为登录凭证" : $i18n.t("base.afterRegisterPhoneAsCredential") }}</div>
            <div></div>
          </li>
          <!-- 邮箱验证码-->
          <li v-if="!inputShowList.logPlugIn && radio == '1'">
            <van-field v-model.trim="form.code" clearable type="digit" placeholder="请输入邮箱验证码" :rules="[{ required: true, message: '请输入邮箱验证码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/auth_code.png" style="width: 0.875rem; height: 1rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <div style="font-size: 12px;" :style="'color:' + 'var(--themeBaseColor)'" @click="verificationEmail">{{ btnText }}</div>
              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 账号-->
          <li v-if="inputShowList.logPlugIn && radio == '0'">
            <van-field v-model.trim="form.account" type="text" clearable placeholder="请输入账号" :rules="[{ required: true, message: '请输入账号' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/login_user.png" style="width: 1rem; height: 1.063rem;" />
                  <div class="iconfont icon-advertise-next icon" style="margin-left: 0.5rem;"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!-- -->
          <!-- 图形验证码-->
          <li v-if="inputShowList.captchaShow && !inputShowList.logPlugIn && radio == '0'">
            <van-field v-model.trim="form.captcha" clearable type="text" placeholder="请输入图形信息" :rules="[{ required: true, message: '请输入图形信息' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/ht_bg_bgimg.png" style="width: 0.95rem; height: 0.875rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px; display: flex; align-items: center;">
                <img :src="imgcode" style="width: 6.25rem; height: 1.875rem;" @click="getimgdata()" />
              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 短信验证码-->
          <li v-if="!inputShowList.logPlugIn && radio == '0' && ((!mobile_check_type && radio == '0') || radio == '1')">
            <van-field
              v-model.trim="form.code"
              clearable
              type="digit"
              :placeholder="$i18n.t('base.enterVerificationCode')"
              :rules="[{ required: true, message: $i18n.t('base.enterVerificationCode') }]"
              :mode="false"
            >
              <template #label>
                <div class="slotCode">
                  <img src="../assets/images/auth_code.png" style="width: 0.875rem; height: 1rem;" />
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
              <template #button style="margin-left: -20px;">
                <div style="font-size: 12px;" :style="'color:' + 'var(--themeBaseColor)'" @click="verificationCode">{{ btnText }}</div>
              </template>
            </van-field>
            <div></div>
          </li>
          <!-- -->
          <!-- 密码-->
          <li v-if="inputShowList.passwordInputShow">
            <van-field v-model.trim="form.password" clearable :type="passwordShow ? 'text' : 'password'" placeholder="请输入密码" :rules="[{ required: true, message: '请输入密码' }]" :mode="false">
              <template #label>
                <div class="slotCode">
                  <div style="width: 1.188rem;">
                    <img
                      :src="passwordShow ? require('@/assets/images/view_password.png') : require('@/assets/images/no_view_password.png')"
                      :style="passwordShow ? 'width: 0.95rem;height: 0.7rem;' : 'width: 0.95rem;height: 0.4rem;'"
                      @click="viewPasswordSwitching"
                    />
                  </div>
                  <div class="iconfont icon-advertise-next icon"></div>
                </div>
              </template>
            </van-field>
          </li>
          <!-- -->
        </ul>
      </div>
    </div>

    <div class="content" v-if="mobile_check_type == 1 && radio !== '1'">
      <div class="inputBox" style="padding: 0 0.875rem;">
        <ul>
          <li>
            <van-field v-model="form.name" label="姓名" placeholder="请输入实名认证姓名" input-align="right" required/>
            <van-field v-model="form.id_no" label="身份证号" placeholder="请输入身份证号" input-align="right" required/>
            <van-field
              v-model.trim="form.mobile"
              type="number"
              clearable
              :label="$i18n.t('base.phoneNumber')"
              :placeholder="$i18n.t('base.enterPhoneNumber')"
              input-align="right" required
              :rules="[{ required: true, message: $i18n.t('base.enterPhoneNumber') }]"
            >
            </van-field>
            <div class='t-l f-12 color-999999' v-if="type == 'register'">{{ $i18n.t("base.afterRegisterPhoneAsCredential") }}</div>
            <van-field
              v-model.trim="form.code"
              clearable
              type="digit"
              label="验证码"
              :placeholder="$i18n.t('base.enterVerificationCode')"
              input-align="right" required
              :rules="[{ required: true, message: $i18n.t('base.enterVerificationCode') }]"
              :mode="false"
            >
              <template #button >
                <div class="f-12 themeColor" @click="verificationCode">{{ btnText }}</div>
              </template>
            </van-field>
          </li>
        </ul>
      </div>
    </div>
    <countryCode :openPopUp.sync="openPopUp" :optValue.sync="form.country"></countryCode>
  </div>
</template>

<script>
import { Toast } from "vant";
import countryCode from "@/components/countryCode.vue"
export default {
  props: ["type", "inputShowList", "email_register"],
  data() {
    return {
      flow_id: "", //流程id,实名认证发送短信需要
      form: {
        name: "",
        id_no: "",
        mobile: "",
        password: "",
        captcha: "",
        code: "",
        confirm_password: "",
        country: "86",
        account: ""
      },
      toastLogin: "",
      btnText: this.$i18n.t("base.getSmsCode"),
      passwordShow: false,
      passwordConfirmShow: false,
      imgcode: "", //验证码图片地址
      subjectColor: "", //主题色
      radio: "0",
      openPopUp:false,
      country_code_arr:COUNTRYCODEARR,
      openPopUp:false,
    };
  },
  components:{countryCode},
  mounted() {
    console.log(this.email_register);
    this.subjectColor = JSON.parse(localStorage.getItem("yz_basic_info")).theme_color;
    if (!this.inputShowList.img) {
      this.getimgdata();
    } else {
      this.imgcode = this.inputShowList.img;
    }
    if (this.email_register) {
      this.radio = String(this.email_register);
    }
  },
  computed: {
    mobile_check_type() {
      if(this.$store.state.temp.register_setting) {
        let mobile_check_type = this.$store.state.temp.register_setting?.mobile_check_type || 0;
        return mobile_check_type;
      }else {
        return 0;// 0: 手机号 1: 实名认证
      }
    }
  },
  methods: {
    // 发送邮箱验证码
    verificationEmail() {
      if (this.btnTag) return;
      if (this.fun.isTextEmpty(this.form.mobile)) {
        Toast("请填写邮箱");
        return;
      }
      if (this.fun.isEmail(this.form.mobile)) {
        Toast("请填写正确的邮箱");
        return;
      }
      if (this.fun.isTextEmpty(this.form.captcha) && this.inputShowList.captchaShow) {
        Toast("请填写图形验证码");
        return;
      }
      this.toastLogin = Toast({
        duration: -1, // 持续展示 toast
        message: "发送中..."
      });
      //发送获取验证码的请求
      $http
        .post("member.register.sendMail", {
          mail: this.form.mobile
        })
        .then(
          response => {
            this.toastLogin.clear();
            if (response.result === 1) {
              this.sendCodeAnimation();
            } else {
              //刷新图形验证码
              Toast(response.msg);
              this.form.captcha = "";
              this.getimgdata();
            }
          },
          response => {
            console.log(response.msg);
          }
        );
    },
    //发送验证码
    verificationCode() {
      if (this.btnTag) return;
      let that = this;
      if (this.fun.isTextEmpty(this.form.country) && this.inputShowList.countryCodeShow) {
        Toast("请输入国际区号");
        return;
      }
      if (this.fun.isTextEmpty(this.form.mobile)) {
        Toast("请填写手机号");
        return;
      }
      if (this.fun.isMoblie(this.form.mobile)) {
        Toast("请填写正确的手机号");
        return;
      }
      if (this.fun.isTextEmpty(this.form.captcha) && this.inputShowList.captchaShow) {
        Toast("请填写图形验证码");
        return;
      }

      if (this.fun.isTextEmpty(this.form.name) && this.mobile_check_type == 1 && this.radio == "0") {
        Toast("请填写姓名");
        return;
      }
      if (this.fun.isTextEmpty(this.form.id_no) && this.mobile_check_type == 1 && this.radio == "0") {
        Toast("请填写身份证号");
        return;
      }

      this.toastLogin = Toast({
        duration: -1, // 持续展示 toast
        message: "发送中..."
      });
      //发送获取验证码的请求
      $http
        .get("member.register.sendCodeV2", {
          mobile: this.form.mobile,
          captcha: this.form.captcha,
          state: this.form.country,
          code: this.form.code,
          name: this.form.name,
          id_no: this.form.id_no,
          reset: this.type == "register" ? 0 : "1",
          sms_type: 1,
          phoneAuthType: 1 //走会员设置--注册/登录设置--手机号验证类型
        })
        .then(
          response => {
            this.toastLogin.clear();
            if (response.result === 1) {
              this.flow_id = response.data?.flow_id||0;
              that.sendCodeAnimation();
            } else {
              //刷新图形验证码
              Toast(response.msg);
              this.form.captcha = "";
              this.getimgdata();
            }
          },
          response => {
            console.log(response.msg);
          }
        );
    },
    //发送验证码 倒计时
    sendCodeAnimation() {
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        Toast.success("验证码已发送");
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
            this.btnText = this.$i18n.t("base.resendIn", this.count, { count: this.count }); //n秒后重新获取;
            this.btnTag = true;
          } else {
            this.btnTag = false;
            this.btnText = this.$i18n.t("base.getSmsCode");
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000);
      }
    },
    //获取图片验证码
    getimgdata() {
      $http
        .get("home-page.getCaptcha")
        .then(res => {
          if (res.data.captcha) {
            this.imgcode = res.data.captcha.img;
          }
        })
        .catch(error => {
          console.log(error);
        });
    },
    viewPasswordSwitching() {
      //密码显示隐藏切换
      this.passwordShow = !this.passwordShow;
    },

    viewConfirm_PasswordSwitching() {
      //密码显示隐藏切换
      this.passwordConfirmShow = !this.passwordConfirmShow;
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.country_code_Box {
  height: 40vh;
  overflow-y: scroll;
}
#input_list {
  background: #fff;
  .content {
    border-radius: 0.313rem;
    padding: 0.2rem;
    // margin: 0.625rem;
    position: relative;
  }

  .inputBox {
    position: relative;
    padding-right: 0.9rem;
    margin-top: -0.2rem;
    .selectBox {
      margin-left: 0.8rem;
      margin-top: 1rem;
    }
    .country {
      ::v-deep .van-field__control {
        margin-left: 2rem;
      }

      ::v-deep .van-cell--required::before {
        left: 9px;
      }
    }

    .slotIphone {
      display: flex;
      color: #00001c;
      font-size: 15px;

      .icon {
        font-size: 21px;
        margin-left: 0.3rem;
      }
    }

    .label {
      color: #4e4e4e;
      font-size: 12px;
      margin-left: 0.8rem;
      margin-top: 0.5rem;
      margin-bottom: 0.5rem;
    }

    .slotCode {
      color: #00001c;
      display: flex;
      align-items: center;
      width: 1.063rem;
      margin-top: -0.2rem;
      margin-left: 0.7rem;

      .icon {
        font-size: 21px;
        margin-left: 0.6rem;
        margin-top: 0.2rem;
      }
    }

    .passwordLogin {
      color: #f14e4e;
      letter-spacing: 0.6px;
      font-size: 12px;
      font-weight: 550;
      margin-top: 17px;
      margin-left: 16px;
    }

    ::v-deep ul li .van-cell {
      align-items: center;
      padding-top: 14px;
      padding-bottom: 14px;
      padding-left: 0.3rem;
    }

    ::v-deep ul li .van-field__label {
      width: 4.25rem;
    }

    ::v-deep .van-field__label {
      color: #00001c;
      letter-spacing: 0.5px;
      width: 3.7rem;
    }
  }
}
.head {
  display: flex;
  align-items: center;
  margin-bottom: 1rem;
  padding: 0 0.65rem;
  padding-top: 1rem;
  .iconfont {
    font-size: 20px;
    font-weight: 600;
  }
  .name {
    font-size: 1.5rem;
    margin-left: 10px;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
  }
}
</style>
